<script lang='ts' setup>
// @ts-ignore
import { commonService } from '~/service/common.service'
// @ts-ignore
import { userService } from '~/service/user.service'
// @ts-ignore
import { Message } from '@arco-design/web-vue'
// @ts-ignore
import { Button, Dropdown, Doption,Icon } from '@arco-design/web-vue/es/index'
// @ts-ignore
const emits = defineEmits(['close'])

const username = ref('')
const code = ref('')
const password = ref('')
const nickName = ref('')

function login(): void {
  if (!password.value) {
    Message.error('请先输入密码')
    return
  }
  const regex = /^(?=.*\d)(?=.*[a-zA-Z!@#$%^&*()_+?])[a-zA-Z0-9!@#$%^&*()_+?]{6,20}$/
  if (!regex.test(password.value)) {
    Message.error('请输入6-10位数字+字母或符号组合')
    return
  }
  if (!nickName.value) {
    Message.error('请输入昵称')
    return
  }
  if (nickName.value.length > 10) {
    Message.error('输入的昵称过长')
    return
  }
  commonService.verify(username.value, code.value).then(res => {
    console.log(res)
    userService.register(username.value, password.value, nickName.value, code.value).then(() => emits('close'))
  })
}

const isSend = ref(false)
const countdown = ref(0)
let timer: NodeJS.Timer

function onSendVerify(): void {
  isSend.value = true
  commonService.sendEmailCode(username.value).then(() => {
    isSend.value = false
    countdown.value = 60
    timer = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--
      } else {
        clearInterval(timer)
      }
    }, 1000)
  }).catch(() => {
    countdown.value = 0
    isSend.value = false
  })
}
</script>
<template>
  <div class='login'>
    <div class='title flex'><span class='text flex'>注册账号</span></div>
    <div class='cell flex'>
      <input type='text' placeholder='请输入邮箱' v-model='username'>
    </div>
    <div class='flex'>
      <div class='cell flex'>
        <input type='text' placeholder='请输入验证码' v-model='code'>
      </div>
      <div class='cell' style='width: 170px;margin-left: 20px;' @click='onSendVerify'>
        <Button class='get-btn' theme='default' variant='text' :loading='isSend' :disabled='!!countdown'>
          {{ countdown > 0 ? countdown + '秒' : '获取验证码' }}
        </Button>
      </div>
    </div>
    <div class='cell flex'>
      <input type='password' placeholder='请输入6-10位数字+字母或符号组合' v-model='password'>
    </div>
    <div class='cell flex'>
      <input type='text' placeholder='请输入10字符以内的昵称' v-model='nickName'>
    </div>
    <button class='cell btn' @click='login'>注册</button>
  </div>
</template>
<style lang='scss' scoped>
.login {
  width: 100%;
  background: var(--color-bg-1);
  padding: 0 50px;
  justify-content: space-between;
}

.title {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 45px;
  justify-content: center;

  .text {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-neutral-10);
    line-height: 33px;
    letter-spacing: 2px;
  }

  .close {
    cursor: pointer;
    font-weight: 600;
    font-size: 25px;
  }
}


.cell {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-neutral-4);
  margin-bottom: 20px;
  overflow: hidden;
  justify-content: space-between;

  .select {
    width: 88px;
    height: 100%;
    font-size: 16px;

    font-weight: 500;
    color: var(--color-neutral-10);
    line-height: 22px;
    letter-spacing: 2px;
    text-align: center;
  }

  input {
    height: 100%;
    flex: 1;
    padding: 15px 20px;
    color: var(--color-neutral-10);
  }

  .get-btn {
    padding: 15px 20px;
    height: 50px;
    width: 100%;
  }
}

.tips {
  border: none;
  border-radius: 0;
  font-size: 16px;

  font-weight: 600;
  color: rgb(var(--arcoblue-6));
  line-height: 22px;
  letter-spacing: 1px;
}

.btn {
  background: rgb(var(--arcoblue-6));
  border-radius: 10px;
  border-color: var(--color-bg-1);
  color: #fff;
  height: 52px;
  cursor: pointer;
  margin-bottom: 0;
  margin-top: 25px;
}
</style>
